<script lang="ts">
  import { createEventDispatcher, onMount } from "svelte";

  const dispatch = createEventDispatcher();

  export let menu: any[] = [];

  export let currentMenu = 1;

  function handleClick(id: number) {
    currentMenu = id;
  }

  onMount(() => {
    menu = [
      { menuId: 1, label: "INDEX" },
      { menuId: 2, label: "TODOLIST" },
      { menuId: 3, label: "WORD" },
    ];
  });
</script>

<div class="nav-wrap">
  {#each menu as { menuId, label } (menuId)}
    {#if menuId == currentMenu}
      <button class="nav active" on:click={handleClick(menuId)}>{label}</button>
    {:else}
      <button class="nav" on:click={handleClick(menuId)}>{label}</button>
    {/if}
  {/each}
</div>

<style>
  .nav-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .nav {
    padding: 7px 12px;
    cursor: pointer;
  }

  .active {
    font-weight: 700;
    color: #fff;
    background-color: rgba(100, 100, 255, 0.8);
  }
</style>
